<template>
  <div class="">
    <div class="echatone" :id="index"></div>
  </div>
</template>

<script>
  import * as echarts from "echarts";

  export default {
    props: ['index', 'mock', 'deviceCode'],
    data() {
      return {
        myChart: null,
        stateColor: {
          '0': "#1db360",//待下发
          '1': "#fabb2d",//已下发
          '2': "#f21d40",//已排程
          '3': "#479bfc",//已派工
          '4': "#b493fb",//生产中
          '5': '#000000',//已完工
          '6': '#666666',//已暂停
          '7': '#777777',//关闭
        },
        data: [],
        state: {startTime: "", endTime: ""},
        startTime: "",
        endTime: "",
        rangeId: Math.floor(Date.now() / 1000),
      };
    },
    created() {
    },
    mounted() {
      this.initEchart();
      window.addEventListener('resize', this.resize);

    },
    destroyed() {
      echarts.dispose(this.myChart);
      this.myChart = null;
      window.removeEventListener('resize', this.resize)
    },
    methods: {
      updateChart(devStatusRecords) {
        let data = [];
        this.startTime = this.$moment(devStatusRecords[0].startTime).unix();
        this.endTime = this.$moment(
          devStatusRecords[devStatusRecords.length - 1].endTime
        ).unix();
        this.state.startTime = this.$moment(devStatusRecords[0].startTime).format(
          "YYYY-MM-DD HH:mm"
        );
        this.state.endTime = this.$moment(
          devStatusRecords[devStatusRecords.length - 1].endTime
        ).format("YYYY-MM-DD HH:mm");
        const that = this;
        devStatusRecords.filter((val, index) => {
          let baseTime = this.$moment(val.startTime).unix();
          let duration = val.duration / 1000;
          data.push({
            name: val.state,
            value: [index, baseTime, baseTime + duration, duration, val],
            itemStyle: {
              normal: {
                // color: that.stateColor[val.state],
                color: val.state==='空闲'?'#1db360':'#f21d40',
              },
            },
          });
        });
        this.data = data;
      },
      resize() {
        this.myChart.resize();
      },
      initEchart() {
        if (this.myChart != null && this.myChart !== "" && this.myChart !== undefined) {
          this.myChart.dispose(); //销毁
        }
        this.myChart = echarts.init(document.getElementById(`${this.index}`));
        const renderItem = (params, api) => {
          let categoryIndex = api.value(0);
          let start = api.coord([api.value(1), categoryIndex]);
          let end = api.coord([api.value(2), categoryIndex]);
          let height = api.size([0, 1])[1];
          let rectShape = echarts.graphic.clipRectByRect(
            {
              x: start[0],
              y: start[1] - height / 2,
              width: end[0] - start[0],
              height: height,
            },
            {
              x: params.coordSys.x,
              y: params.coordSys.y,
              width: params.coordSys.width,
              height: params.coordSys.height,
            }
          );
          return (
            rectShape && {
              type: "rect",
              transition: ["shape"],
              shape: rectShape,
              style: api.style(),
              emphasis: {
                style: {
                  shadowColor: "rgba(51,51,51,0.5)",
                  shadowBlur: 5,
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                },
              },
            }
          );
        };
        const tooltipStr = (params) => {
          let htmlStr = `<div>
          <div style="margin-bottom: 15px">
            <span style="color: #666666;display:inline-block;width:100px;">开始时间:</span>
            <span style="color:#333333">${params.value[4].startTime}</span>
          </div>
           <div style="margin-bottom: 15px">
            <span style="color: #666666;display:inline-block;width:100px;">结束时间:</span>
            <span style="color:#333333">${params.value[4].endTime}</span>
          </div>
          <div style="margin-bottom: 1px">
            <span style="color: #666666;display:inline-block;width:100px;">设备编号:</span>
            <span style="color:#333333">${this.deviceCode}</span>
          </div>
        </div>`;
          return htmlStr;
        };
        this.updateChart(this.mock);
        const that = this;
        this.myChart.setOption({
          tooltip: {
            position: "left",
            triggerOn: "mousemove",
            formatter: function (params) {
              return tooltipStr(params);
            },
          },
          dataZoom: [
            {
              type: "inside",
              filterMode: "weakFilter",
            },
          ],
          grid: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
            height: 20,
            width: "100%",
          },
          xAxis: {
            min: this.startTime,
            max: this.endTime,
            scale: true,
            axisLine: false,
            axisTick: false,
            splitLine: false,
            axisLabel: false,
          },
          yAxis: {
            axisLine: false,
            axisTick: false,
            splitLine: false,
            axisLabel: false,
            data: [""],
          },
          series: [
            {
              legendHoverLink: false,
              type: "custom",
              renderItem: renderItem,
              encode: {
                x: [1, 2],
                y: 0,
              },
              data: that.data,
            },
          ],
        });
      },
    },
  };
</script>
<style scoped lang="scss">
  .echatone {
    width: 100%;
    height: 25px;
  }

  .timeAxis {
    line-height: 25px;
  }

  .startTime {
    font-size: 12px;
    color: #333333;
  }

  .endTime {
    font-size: 12px;
    color: #333333;
    float: right;
  }
</style>
